<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Vaca DropMenus</title>
	<script src="../lib/mootools-1.2.1-core-nc.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/vacalib.js" type="text/javascript" charset="utf-8"></script>
	<script src="../lib/ui/dropmenu.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		$(window).addEvent('domready', function() {
			$$('.vaca-dropmenu-btn').each(function(item,index){
				new Vaca.UI.DropMenu(item);
			});

			var controller = new Vaca.BaseObject();

			$('openall').addEvent('click', function(event){
				event.preventDefault();
				controller.sendMessageToPool({ targetClass: 'DropMenu', data: 'show' });
			});
			$('closeall').addEvent('click', function(event){
				event.preventDefault();
				controller.sendMessageToPool({ targetClass: 'DropMenu', data: 'hide' });
			});
			$(document).addEvent('click', function(event){
				event.preventDefault();
				controller.sendMessageToPool({ targetClass: 'DropMenu', data: 'hide' });
			});
		});
	</script>
	<style type="text/css" media="screen">
		* {
			margin:  0;
			padding: 0;
		}
		.menubar {
			overflow: hidden;
		}
		#content {
			height: 500px;
		}
		.vaca-dropmenu-btn {
			border: solid 1px #666;
			float: left;
			text-align: center;
			width: auto;
		}
		.vaca-dropmenu-btn a {
			display: block;
			height: 100%;
			padding: 4px 15px;
			text-align: center;
		}
		.vaca-dropmenu-menu {
			background-color: #eee;
			border: solid 1px #444;
			display: none;
			position: absolute;
		}
		.vaca-dropmenu-menu li {
			list-style: none;
		}
	</style>
</head>
<body>
	<div class="menubar">
		<div class="vaca-dropmenu-btn"><a href="#">Menu 1</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
			</ul>
		</div>

		<div class="vaca-dropmenu-btn"><a href="#">Menu 2</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
			</ul>
		</div>

		<div class="vaca-dropmenu-btn"><a href="#">Menu 3</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 1234567890</a></li>
			</ul>
		</div>
	</div>

	<div id="content">
		<p>Lorem ipsum...</p>
		<p><a id="openall" href="#">Open all menus</a></p>
		<p><a id="closeall" href="#">Close open menus</a></p>
	</div>

	<div class="menubar">
		<div class="vaca-dropmenu-btn"><a href="#">Menu 1</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
			</ul>
		</div>

		<div class="vaca-dropmenu-btn"><a href="#">Menu 2</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
			</ul>
		</div>

		<div class="vaca-dropmenu-btn"><a href="#">Menu 3</a></div>
		<div class="vaca-dropmenu-menu">
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
				<li><a href="#">Item 6</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
